<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>详细统计</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/dcalendar.picker.css">
  <link rel="stylesheet" href="css/cqs.style.css">
</head>
<body style="background-color: #f4f4f4;">
<div class="cqs-main">
  <div class="cqs-main_top cqs-mgt30">数据报表：<a class="cqs-clc40000" href="javascript:;">采购用户统计＞</a>码力_U001</div>
  <div class="cqs-main_con">
    <div class="cqs-main_left">
      <div class="cqs-title">年采购量
        <div class="date-box cqs-year">
          <select class="form-control" style="background:#ffffff;width:86px;">
            <option>2017年</option>
            <option>2016年</option>
            <option>2015年</option>
            <option>2014年</option>
            <option>2013年</option>
          </select>
        </div>

      </div>

      <div style="margin-left: 80px;" id="myChart" class="myChart"></div>

      <div class="i-char-hint">
        <span></span>平均实际采购
        <span class="cqs-bgd9f0ff"></span>（平均）每月预算
        <span class="cqs-bgc40000"></span>实际采购
      </div>
    </div>
    <div class="cqs-main_right">
      <div class="cqs-list_head">
        <div class="cqs-list_hd"><img class="head" src="./img/icon_zhanghao.png" alt=""></div>
        <div class="cqs-list_bd">
          <a class="more" href="javascript:;">查看资料＞</a>
          <p>账号：码力_U001</p>
          <p>联系人：王安</p>
          <p class="cqs-mgb30">联系方式：13412341234</p>
        </div>
      </div>

      <div class="cqs-list_head">
        <div class="cqs-list_hd"><img class="head" src="./img/icon_yusuan.png" alt=""></div>
        <div class="cqs-list_bd">
          <a class="more" href="javascript:;">修改预算＞</a>
          <p>预算（月）：￥3,000.00</p>
          <p>已使用：￥1,000.00</p>
          <p class="cqs-mgb30">剩余预算：￥1,000.00</p>
        </div>
      </div>

      <div class="cqs-list_head">
        <div class="cqs-list_hd"><img class="head" src="./img/icon_caigou.png" alt=""></div>
        <div class="cqs-list_bd">
          <p>平均每月采购：￥1,682.50</p>
          <p>今年累计采购：￥20,190.00</p>
          <p class="cqs-mgb30">累计采购次数：13次</p>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap-table.min.js"></script>
<script src="js/dcalendar.picker.js"></script>
<script src="js/ichart.1.2.min.js"></script>
<script>


  $(function(){
    var data = [
      {
        name : '北京',
        value:[200,2000,1500,2500,2600,3000,3200,2900,2200,1200,1000,5500],
        color:'#c40000',
        line_width:2
      }
    ];
    var chart = new iChart.LineBasic2D({
      render : 'myChart',
      data: data,
      // title : '北京2012年平均温度情况',
      width : 580,
      height : 350,
      // offsetx: 80,
      // offsety: 50,
      coordinate:{height:'90%',background_color:'#ffffff',striped: false},
      sub_option:{
        hollow_inside:true,//设置一个点的亮色在外环的效果
        point_size:10,
        smooth : true,
        label:false
      },
      tip:{
        enable:true,
        shadow:false,
        listeners:{
          //tip:提示框对象、name:数据名称、value:数据值、text:当前文本、i:数据点的索引
          parseText:function(tip,name,value,text,i){
            return "<span style='background-color#2b2d2e;font-size:20px;'>¥"+value+"</span>";
          }
        }
      },
      align: 'center',
      border: 0,
      label: {
        color: '2b2d2e'
      },
      labels:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
    });
    /**
     *自定义组件,画平均线。
     */
    /*      //Custom plugin, show success and failure.
     chart.plugin(new iChart.Custom({
     drawFn:function(){
     //Position
     var coo = chart.getCoordinate(),
     x = coo.get('originx'),
     y = coo.get('originy'),
     w = coo.width,
     h = coo.height;
     //Render the text
     chart.target.textAlign('start')
     .textBaseline('bottom')
     .textFont('600 11px Times New Roman')
     .fillText('Success',x-50,y+h/4+5,false,'#3e576f')
     .textBaseline('top')
     .fillText('Failure',x-50,y+3*h/4-5,false,'#3e576f');
     console.log(x, y, w, h);
     }
     }));*/
    //Success line 平均实际采购
    var maxNum = 6000;
    var actualNum = 4500;
    var budgetNum = 1500;
    chart.plugin(new iChart.Custom({
      drawFn:function(){
        var avg = chart.total/5,
            coo = chart.getCoordinate(),
            x = coo.get('originx'),
            W = coo.width,
            S = coo.getScale('left'),
            H = coo.height,
            h = (avg - S.start) * H / S.distance,
            y = chart.y + (H*(maxNum-actualNum))/maxNum ;
        console.log("two:"+y);
        chart.target.line(x,y,x+W,y,2,'#f9de85')
            .textAlign('start')
            .textBaseline('middle')
            .textFont('600 12px Verdana')
            .fillText('平均实际采购',x+W+5,y,true,'#b32c0d');
      }
    }));

    //Failure line
    chart.plugin(new iChart.Custom({
      drawFn:function(){
        var avg = chart.total/5,
            coo = chart.getCoordinate(),
            x = coo.get('originx'),
            W = coo.width,
            S = coo.getScale('left'),
            H = coo.height,
            h = (avg - S.start) * H / S.distance,
            y = chart.y +  (H*(maxNum-budgetNum))/maxNum  ;
        console.log(x,y,x+W,y);
        chart.target.line(x,y,x+W,y,2,'#d9f0ff')
            .textAlign('start')
            .textBaseline('middle')
            .textFont('200 12px Verdana')
            .fillText('（平均）每月预算',x+W+5,y,true,'#b32c0d');
      }
    }));
    chart.draw();
  });

</script>
</body>
</html>